<template>
  <header class="home-header" :style="{ position: showLogo ? 'fixed' : 'relative', zIndex: showLogo ? 100 : 1, width: '100%' }">
    <div style="font-size: 1.4em; float: left; cursor: pointer" @click="goToPage('Index')">
      <div class="logo flex items-center gap-2">
        <img alt="logo" class="w30px! h30px!" src="https://qushen-outsourcing.oss-cn-beijing.aliyuncs.com/hongyou/logo.png" />
        <b>会议保障应用系统</b>
      </div>
    </div>

    <el-menu
      class="el-menu-demo"
      :default-active="activeIndex"
      :ellipsis="false"
      mode="horizontal"
      style="margin: 0 auto; display: flex; align-items: center; justify-content: center"
      @select="handleSelect"
    >
      <el-menu-item index="" style="display: none" />
      <el-menu-item index="Index">
        <el-icon size="30"><school /></el-icon>
        会议列表
      </el-menu-item>

      <el-sub-menu index="MeetingRooms">
        <template #title>
          <el-icon size="30"><school /></el-icon>
          会议室管理
        </template>
        <el-menu-item index="MeetingRoomsOverview">会议室概览</el-menu-item>
        <el-menu-item index="MeetingRoomsNew">会议室维护</el-menu-item>
        <!-- <el-menu-item index="ReserveNew">预约审批</el-menu-item> -->
      </el-sub-menu>
      <el-menu-item index="PlaceList">
        <el-icon size="30"><school /></el-icon>
        住宿场所管理
      </el-menu-item>

      <el-sub-menu index="system">
        <template #title>
          <el-icon size="30"><setting /></el-icon>
          系统管理
        </template>
        <el-menu-item index="UserList">用户管理</el-menu-item>
        <el-menu-item index="Duty">职务管理</el-menu-item>
        <el-menu-item index="SetList">系统配置</el-menu-item>
      </el-sub-menu>

      <!-- <el-sub-menu index="approval">
        <template #title>
          <el-icon size="30"><document-checked /></el-icon>
          审批管理
        </template>
        <el-menu-item index="Approval">流程配置</el-menu-item>
        <el-menu-item index="ExamineList">审批管理</el-menu-item>
      </el-sub-menu> -->
    </el-menu>

    <div class="right">
      <vab-avatar />
    </div>
  </header>
</template>
<script lang="ts" setup>
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import VabAvatar from '../../../../library/components/VabAvatar/index.vue'

const route = useRoute()
const router = useRouter()

onMounted(() => {
  // 在组件挂载时设置 activeIndex 为当前路由的 name
  activeIndex.value = route.name as string
})

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  goToPage(key)
}

const goToPage = (name: string) => {
  router.push({ name })
}

withDefaults(
  defineProps<{
    showLogo?: boolean
  }>(),
  {
    showLogo: true,
  }
)
</script>

<script lang="ts">
export default defineComponent({
  name: 'HeaderComponent',
})
</script>
<style lang="scss" scoped>
.home-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 57px;
  padding: 0 50px;
  line-height: normal;
  background: #fff;
  overflow: hidden;

  .el-menu {
    flex: 1;
    margin: 0 20px;
  }

  .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 120px;
  }

  .el-menu--horizontal > .el-menu-item:nth-child(1) {
    margin-right: auto;
  }
}
</style>
<style lang="scss">
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>
